import React from 'react'
import { render } from 'react-dom'
// import App from './App.jsx'

// React中的组件 (两种)
// 函数式组件 ==> (展示视图)
// function App() {
//     return <div>
//         我是根组件
//     </div>
// }

// 类组件 ==> (处理逻辑操作)
// 通过map来进行循环列表
class App extends React.Component{
    // 管理内部数据
    constructor(props) {
        super(props)
        // Object.assign 对象合并
        this.state = {
            arr: [1, 2, 3, 4, 5, 6, 7, 8, 9],
            count: 100,
            num: 888
        }    
    }
    // state = {
    //     arr: [1, 2, 3, 4, 5, 6, 7, 8, 9]
    // }

    add(k) {
        // this.state.count += 1
        // console.log(this.state.count)
        // 在react中修改数据用this.setState({}, callBack) ==> 会重新读取render函数
        this.setState({
            count: 200
        }, () => {
            console.log('修改成功')
        })
    }
    render() {
        console.log('我看看render有没有重新执行')
        const { arr, count, num } = this.state
        return <div>
            <ul>
                {
                    arr.map((item, index) => {
                        return <li key = { index }>
                            { item }
                        </li>
                    })
                }
            </ul>
            <h3>{ count }</h3>
            {/* React中的事件 */}
            {/* 如果函数需要传参 在外面包一层箭头函数 */}
            <button onClick = { () => {
               this.add('kkkk')
            } }>+1</button>
        </div>
    }
}


render(<App/>, document.getElementById('root'), () => {
    console.log('渲染成功')
})






